<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易结算</title>
    <!--导入layui包-->
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/font.css">
</head>
<body>
<blockquote class="layui-elem-quote news_search">
    <!--数据表格-->
    <table class="layui-hide" id="secStockTable" lay-filter="secStockList"></table>

    <script type="text/html" id="secStock_search">
        <!--多条件查询层-->
        <!--多条件查询层-->
        <div style="float: left">
            <form class="layui-form layui-col-md12 x-so">
                交易方式 :
                <div class="layui-input-inline">
                    <select name="may" id="may">
                        <option value="">请选择交易方式</option>
                        <option value="买入">买入</option>
                        <option value="卖出">卖出</option>
                    </select>
                </div>
                状态:
                <div class="layui-input-inline">
                    <select name="tranStatus" id="tranStatus">
                        <option value="0">请选择状态</option>
                        <option value="-1">未结算</option>
                        <option value="1">已结算</option>
                    </select>
                </div>
                <button id="search" class="layui-btn  layui-btn-primary layui-bg-gray" lay-submit data-type="reload"
                        lay-filter="provinceSearch">
                    <i class="layui-icon">&#xe615;</i>
                </button>
            </form>
        </div>
        <!--多条件查询结束-->

        <!--头部工具栏-->
        <div class="layui-btn-container layui-input-inline" style="margin-left: 900px;top: -40px;">
            <button class="layui-btn layui-btn-normal" lay-event="account">
                <i class="layui-icon">&#xe654;</i>结算
            </button>
        </div>
    </script>


    <!-- 行中操作按钮[仅对本行操作] -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="delete">删除</a>
    </script>

    <!--脚本代码-->
    <script type="text/javascript">
        layui.use(['table','layer','form','laypage','util','jquery'],function () {
            //导入模块并得到模块对象
            var table = layui.table,//表格对象
                layer = layui.layer,//弹层对象
                form = layui.form,//表单对象
                laypage = layui.laypage,//分页组件
                $ = layui.jquery,//jquery对象
                util = layui.util;//工具对象
            var vals="";
            //渲染表格对象
            table.render({
                //id:"houseReload",//为多条件搜索重新加载使用
                elem: "#secStockTable",//表格对象路径
                method: "get",//提交方式
                url: "/trabsactionCrud/trabsaction",//后台服务
                height:740,
                toolbar: "#secStock_search",//表格上方普通工具栏
                //一页显示5条数据
                limit: 15,
                cols: [
                    [
                        {checkbox:true},//开启多选框
                        {field:"tranId",title:"交易编号",align:"center",width:180},
                        {field:"tranDate",title:"交易日期",align:"center",width:180,
                            templet:function(d){return util.toDateString(d.tranDate,"yyyy-MM-dd");}},
                        {field:"tranNum",title:"交易数量(支)",align:"center",width:180,templet:function (d) {
                                if (d.tranNum.toString().indexOf(".")!=-1){
                                    return d.tranNum.toLocaleString();
                                }else{
                                    return (d.tranNum+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
                                }
                            }},
                        {field:"price",title:"交易单价(元)",align:"center",width:180},
                        {field:"settMoney",title:"结算金额(元)",align:"center",width:180,templet:function (d) {
                                if (d.settMoney.toString().indexOf(".")!=-1){
                                    return d.settMoney.toLocaleString();
                                }else{
                                    return (d.settMoney+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')+".00";
                                }
                            }},
                        //如果需要注意日期格式化
                        {field:"settDate",title:"结算日期",align:"center",width:180,
                            templet:function(d){return util.toDateString(d.settDate,"yyyy-MM-dd");}},
                        {field:"tranMoney",title:"交易金额(元)",align:"center",sort:true,width:180,templet:function (d) {
                                if (d.tranMoney.toString().indexOf(".")!=-1){
                                    return d.tranMoney.toLocaleString();
                                }else{
                                    return (d.tranMoney+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')+".00";
                                }
                            }},
                        {field:"accName",title:"现金账户名称",align:"center",width:180},
                        {field:"seName",title:"证券名称",align:"center",width:180},
                        {field:"stockName",title:"券商名称",align:"center",width:180},
                        {field:"may",title:"交易方式",align:"center",width:180,templet:function (d) {
                                if (d.may=="买入"){
                                    return "买入";
                                }else if (d.may=="卖出"){
                                    return "卖出";
                                }
                            }},
                        {field: 'tranStatus', title: '状态',width:180,templet:function (d) {
                            if (d.tranStatus==-1){
                                return "<span style='color: red'>未结算</span>";
                            }else if(d.tranStatus==1){
                                return "<span style='color: #06b535'>已结算</span>";
                            }
                        }},
                        {fixed:"right",title:"操作",width:160,align:"center",toolbar:"#barDemo",width:180}
                    ]
                ],
                page: true,
                //一页选择显示5或10条数据
                limits: [5, 10,20,30,50]
            });

            // 表格头部工具栏事件代码，根据lay-event属性值判断执行相应的代码
            table.on('toolbar(secStockList)', function(obj) {
                //检查表格选择操作状态
                var checkStatus = table.checkStatus(obj.config.id);
                //判断事件event值
                switch(obj.event) {
                    /*case 'add':
                        //请求方式为post
                        method="post";
                        //清空表单
                        $("#secStockForm")[0].reset();
                        layer.open({
                            type:1,//外部页面为2，内部层1
                            title:"<i class=\"layui-icon\">&#xe61f;</i>添加证券库存",
                            area:["40%","90%"],
                            shade:0.4,
                            content:$("#data-main").html()
                        });
                        //将主键设置成允许修改[防止因先修改，后增加时，该字段被设置为只读]
                        $("input[name='secId']").prop("readonly",false);
                        break;*/
                    case 'account':
                        //获得选中的表格行
                        var data = checkStatus.data;
                        //判断是否大于0行
                        if(data.length>0){

                            layer.confirm("是否结算", function (index) {
                                //获取所有选择的id
                                var tranIdStr="";
                                for (var i = 0; i < data.length; i++) {
                                    tranIdStr = tranIdStr+data[i].tranId+",";//累加字符
                                }
                                //去掉最后多余的逗号
                                //tranIdStr=tranIdStr.substring(0,tranIdStr.length-1);
                                layer.close(index);
                                $.ajax({
                                    type: "post",
                                    url: "/trabsactionCrud/allocation/"+tranIdStr,//后台Servlet路径
                                    /*data: JSON.stringify(data.field),
                                    dataType:"text",
                                    contentType:"application/json;charset=utf-8",*/
                                    success: function (msg) {
                                        //重新加载表格数据
                                        table.reload('secStockTable');
                                        layer.msg(msg);
                                    }
                                });
                            });
                        }else{
                            //没有选择数据行
                            layer.msg('请至少选一行！');
                        }
                        break;
                }
            });
            //监听表格行工具(操作)事件 [不能和前面写在一起，原因二者参数有区别：前者toolbar，这里为tool]
            table.on("tool(secStockList)",function (obj) {
                //得到表格行数据
                var data=obj.data;
                //判断事件event值，与lay-event属性比较(使用switch或if梯形结构都可以,前面已经用过switch,
                // 此处使用if梯形结构)
                //判断是否为行修改操作
                if(obj.event == "update"){
                    //将设置请求方式为put
                    method="put";
                    //设置界面信息
                    layer.open({
                        type: 1,
                        title:'<i class="layui-icon">&#xe642;</i>修改证券库存',
                        area: ["40%","90%"],
                        shade: 0.4,
                        content: $("#data-main").html()
                    });
                    //将当前行数据显示在表单各字段中
                    form.val("secStockFormTest", {
                        "tranDate": data.tranDate,
                        "tranNum":data.tranNum,
                        "price":data.price,
                        "settMoney":data.settMoney,
                        "settDate":data.settDate,
                        "tranMoney":data.tranMoney,
                        "caId":data.caId,
                        "seName":data.seName,
                        "stockName":data.stockName,
                        "may":data.may,
                        "tranStatus":data.tranStatus
                    });
                    //将主键设置成只读:不允许修改
                    $("input[name='secId']").prop("readonly","readonly");
                }else if(obj.event=="delete") {
                    layer.confirm("真的删除证券交易编号为" + data.tranId + "这行数据吗?", function (index) {
                        //执行表格中删除操作
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            type: "delete",
                            url: "/trabsactionCrud/trabsaction/" + data.tranId,//后台Servlet路径
                            success: function (msg) {
                                //重新加载表格数据
                                table.reload('secStockTable');
                                layer.msg(msg);
                            }
                        });
                    });
                }
            });

            //多条件搜索
            //搜索表单中提交按钮的事件代码
            form.on("submit(provinceSearch)",function (data) {
                //定义表单数据对象
                var formData=data.field;
                //得到表单数据json字符串
                var json=JSON.stringify(data.field);
                //alert(json);
                //重新加载表格对象
                table.reload("secStockTable",{
                    //页码
                    page:{
                        curr:1
                    },
                    //条件数据，会带到后台
                    where:{
                        may:formData.may,
                        tranStatus:formData.tranStatus
                    }
                });
                return false;
            });
        });
    </script>
</blockquote>
</body>
</html>